<!DOCTYPE html>
 <!-- 219970720刘莹 -->
<html>
<head>
    <meta charset="UTF-8">
    <title>练习7使用Ajax实现判断用户名是否存在</title>
</head>
<body>
	<div> 
		姓&nbsp;名:<input type="text" id="name" />
	<span></span>
	</div>
	<div>
		密&nbsp;码:<input type="password" />
	</div>
	<div>
		<button type="button">提交</button>
	</div>
</body>
</html>
<script>
    var nameinput = document.querySelector("#name");
    nameinput.addEventListener("blur", function() {
        nameinput.nextSibling.nextSibling
        .innerHTML="";
        var xhr = new XMLHttpRequest();
        var url ="https://mock.apifox.cn/m1/2787428-0-default/hasname";
        url +="?username="+nameinput.value;

        xhr.open("GET",url, true);
        xhr.send();
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                var result = xhr.responseText;
                if(result=="1"){
                    nameinput.nextSibling.nextSibling .innerHTML ="用户名已存在";
                }else{
                    nameinput.nextSibling.nextSibling.innerHTML ="ok";   
                 }
            }
        };
    });   
</script>